<template>
  <div class="message">
    <div class="message-content flex">
      <div class="message-icon"></div>
      <p class="text">{{ props.message }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  message: {
    type: String,
    default: 'Hello Vue 3.0 + Vite + Typescript!'
  },
  duration: {
    type: Number,
    default: 3000
  },
  type: {
    type: String,
    default: 'info'
  }
})
</script>

<style scoped>
.text {
  color: var(--xz-fontcolor);
  font-size: 0.9rem;
  font-weight: bold;
}
</style>
